<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    list: { title?: string; value?: any; badgeProps?: any }[]
    label?: string
    modelValue?: any
    valueName?: string
  }>(),
  {
    label: 'title',
    valueName: 'value',
  },
)

const inputValue = computed({
  get: () => props.modelValue,
  set: (val) => {
    emit('update:modelValue', val)
  },
})
onMounted(() => {
  emit('update:modelValue', props.modelValue)
})

const emit = defineEmits(['update:modelValue', 'change'])
function tabChange(val) {
  const value = props.list[val.index][props.valueName]
  if (value === props.modelValue) return
  emit('update:modelValue', value)
  emit('change', value)
}
</script>

<template>
  <view class="use-tab">
    <wd-tabs
      :duration="100"
      animated
      inactiveColor="#6A707C"
      color="#2B2F36"
      v-bind="$attrs"
      v-model="inputValue"
      @click="tabChange"
    >
      <block v-for="(item, index) in list" :key="index">
        <wd-tab
          :title="item[label]"
          :name="item[valueName]"
          :badge-props="item.badgeProps"
        ></wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<style lang="scss">
.use-tab {
  ::v-deep .wd-tabs {
    background: transparent !important;
    background-color: transparent !important;
  }

  ::v-deep .wd-tabs__nav {
    background: transparent !important;
    background-color: transparent !important;
  }
  ::v-deep .wd-tabs__nav-item-text {
    font-size: 29rpx;
  }
  ::v-deep .wd-tabs__line {
    bottom: 2rpx !important;
    width: 64rpx !important;
    height: 16rpx !important;
    background: url('@/static/images/sys/green-line.png') no-repeat !important;
    background-size: 100% 100% !important;
  }
}
</style>
